<script setup lang="ts">
import TopBar from "@/components/TopBar.vue";
import SideBar from "@/components/SideBar.vue";
import { Fold } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { ref, watch, provide } from "vue";

const router = useRouter();
const route = useRoute();

const isNoSidebarRoute = ref(false);

watch(
    () => route.path,
    (newPath) => {
      isNoSidebarRoute.value = noSideBarRouterList.includes(route.path);
    },
);

/**
 * 用于判断是否是不展示SideBar的变量
 */
const isLoginPage = ref(false);

/**
 * 这个列表里面写的path不会展示sideBar
 */
const noSideBarRouterList = ["/login", "/register"];

watch(
    () => router.currentRoute.value.path,
    (path) => {
      isLoginPage.value = noSideBarRouterList.indexOf(path) !== -1;
      // console.log(isLoginPage.value);
    },
);

// 设置菜单栏可折叠
const isCollapse = ref(false);
const collapseNav = () => {
  isCollapse.value = !isCollapse.value;
};
provide("isCollapse", isCollapse);
</script>

<template>
  <div class="app_zone">
    <el-container>
      <el-header height="auto">
        <TopBar v-if="!isLoginPage"></TopBar>
      </el-header>
      <el-container style="min-height: 87vh">
        <el-aside width="collapse">
          <SideBar v-if="!isLoginPage"></SideBar>
        </el-aside>
        <el-main>
          <div
              :class="{ 'collapse-btn': true, no_show: isNoSidebarRoute }"
              @click="collapseNav"
          >
            <el-icon>
              <Fold />
            </el-icon>
          </div>
          <router-view id="total-view"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

  <!-- <div id="app_zone">
      <TopBar v-if="!isLoginPage"></TopBar>
    <el-container>
      <SideBar v-if="!isLoginPage"></SideBar>
      <router-view id="total-view"></router-view>
    </el-container>
  </div> -->
</template>

<style scoped>
#total-view {
  margin-left: 3%;
  width: 95%;
}

.collapse-btn.no_show {
  opacity: 0%;
}

.collapse-btn {
  opacity: 100%;
}

.app_zone {
  background: linear-gradient(to bottom, #ffffff, #b9cbff);
}
</style>
